<template>
  <div>

    <el-card class="box-card" style="height:760px">

      <div style="padding-top: 80px">
        <el-table
            v-loading="loading"
            :data="logTable"
            :header-cell-style="{color:'#000',background:'#f5f7fa'}"
            border
            stripe
            style="width: 100% ;height: 650px;"
        >
          <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
          <el-table-column align="center" label="角色" prop="roleName">
            <template slot-scope="scope">
              <template>
                <el-tag :type="formatTagType(scope.row.roleName)">{{ scope.row.roleName }}</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column align="center" fixed="right" label="编辑">
            <template slot-scope="scope">
              <el-button icon="el-icon-menu" size="small" type="info" @click="selectMenu(scope.row.id)">分配菜单</el-button>
              <el-button icon="el-icon-edit" size="small" type="success" @click="setRole(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog title="分配菜单" :visible.sync="menuFormVisible" width="30% ">
      <el-tree
          :data="menuData"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="expends"
          :default-checked-keys="checks"
          :props="menuProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span> <i :class="data.icon"></i>{{ data.name }}</span>
       </span>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="menuFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleMenu()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改信息" :visible.sync="roleFormVisible" width="30% ">
      <el-form :model="roleForm" label-width="100px">
        <el-form-item label="角色名：">
          <el-input v-model="roleForm.roleName" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述：">
          <el-input v-model="roleForm.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import request from "@/utils/request";

export default {
  name: "role",

  data() {
    return {
      logTable: [],
      loading: true,
      form: {},
      roleForm: {},
      menuFormVisible: false,
      roleFormVisible: false,
      menuData: [],
      menuProps: {
        label: 'name'
      },
      expends:[],
      checks:[],
      roleId:0
    }
  },
  created() {
    this.loadInfo();
  },
  methods: {
    reloadTable() {
      this.loadInfo();
    },
    loadInfo() {
      request.post("/role/info").then(response => {
        this.loading = false
        if (response.code === '200') {
          this.logTable = response.data
        } else {
          this.$message.error("获取角色信息失败")
        }
      })
    },
    formatTagType(userType) {
      if (userType === '管理员') return ''
      else if (userType === '学生') return 'success'
      else if (userType === '教师') return 'danger'
      else return 'success'
    },
    setRole(row) {
      this.roleFormVisible = true;
      this.roleForm = JSON.parse(JSON.stringify(row));
    },
    selectMenu(rowId) {
      this.menuFormVisible = true;
      this.roleId = rowId
      this.checks = []
      console.log(this.checks)
      request.get("/menu/info", {
        params: {name: ""}
      }).then(res => {
        this.menuData = res.data
       this.expends = this.menuData.map(v => v.id)
        request.get("/role/roleMenu/"+rowId).then(res=>{
         this.checks = res.data
        })
      })
    },
    // 分配菜单
    saveRoleMenu(){
      request.post("/role/roleMenu/"+this.roleId,this.$refs.tree.getCheckedKeys()).then(res=>{
        if (res.code === '200') {
          this.$message.success("绑定成功");
          this.menuFormVisible = false
        }else {
          this.$message.error("绑定失败")
        }
      })
    },
    save(){
      request.post("/role/update",this.roleForm).then(res =>{
        if (res.code === '200') {
          this.$message.success(res.data);
          this.roleFormVisible = false;
          this.loadInfo();
        }else if (res.code === '500') {
          this.$message.error(res.msg);
        }
      })
    }
  },
}
</script>

<style scoped>
/deep/ .el-button--mini {
  padding: 8px 10px;
}

/deep/ .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}

.color {
  background-color: #1a1a1c;
}

</style>